<template>
  <div class="footer">
    <div class="service-footer w">
      <ul>
        <li><a href="javascript:;">预约维修服务</a></li>
        <li><a href="javascript:;">7天无理由退货</a></li>
        <li><a href="javascript:;">15天免费换货</a></li>
        <li><a href="javascript:;">满69元包邮</a></li>
        <li><a href="javascript:;">520余家售后网点</a></li>
      </ul>
    </div>
    <div class="help-footer w">
      <div class="help-footer-left">
        <dl>
          <dt>帮助中心</dt>
          <dd><a href="javascript:;">账户管理</a></dd>
          <dd><a href="javascript:;">购物指南</a></dd>
          <dd><a href="javascript:;">订单操作</a></dd>
        </dl>
        <dl>
          <dt>服务支持</dt>
          <dd><a href="javascript:;">售后政策</a></dd>
          <dd><a href="javascript:;">自助服务</a></dd>
          <dd><a href="javascript:;">相关下载</a></dd>
        </dl>
        <dl>
          <dt>线下门店</dt>

          <dd><a href="javascript:;">小鑫之家</a></dd>
          <dd><a href="javascript:;">服务网点</a></dd>
          <dd><a href="javascript:;">相关授权体验店/专区</a></dd>
        </dl>
        <dl>
          <dt>关于小鑫</dt>
          <dd><a href="javascript:;">了解小鑫</a></dd>
          <dd><a href="javascript:;">加入小鑫</a></dd>
          <dd><a href="javascript:;">投资者关系</a></dd>
          <dd><a href="javascript:;">企业社会责任</a></dd>
          <dd><a href="javascript:;">廉洁举报</a></dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd><a href="javascript:;">新浪微博</a></dd>
          <dd><a href="javascript:;">官方微信</a></dd>
          <dd><a href="javascript:;">联系我们</a></dd>
          <dd><a href="javascript:;">公益基金会</a></dd>
        </dl>
        <dl>
          <dt>特色服务</dt>
          <dd><a href="javascript:;">F码通道</a></dd>
          <dd><a href="javascript:;">礼物码</a></dd>
          <dd><a href="javascript:;">防伪查询</a></dd>
        </dl>
      </div>
      <div class="help-footer-right">
        <ul>
          <li>400-100-5678</li>
          <li>8:00-18:00(仅收市话费)</li>
          <li><a href="javascript:;">人工客服</a></li>
          <li>qq:1808213524</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonFooter",
};
</script>

<style lang="less" scoped>
.footer {
  padding-bottom: 30px;
  background-color: #fff;
  .service-footer {
    height: 80px;
    ul {
      display: flex;
      height: 100%;
      line-height: 80px;
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
      li {
        a {
          display: inline-block;
          width: 242px;
          font-size: 16px;
          color: #616161;
          text-align: center;
          &:hover {
            color: cornflowerblue;
          }
        }
        &:not(li:last-child) {
          a {
            &::after {
              content: "";
              float: right;
              margin-top: 25px;
              width: 1px;
              height: 30px;
              background-color: rgba(0, 0, 0, 0.3);
            }
          }
        }
      }
    }
  }
  .help-footer {
    display: flex;
    justify-content: space-between;
    .help-footer-left {
      display: flex;
      dl {
        width: 160px;
        dt {
          margin: 25px 0;
          font-size: 14px;
          color: #424242;
        }
        dd {
          margin-bottom: 10px;
          a {
            font-size: 12px;
            color: #757575;
            &:hover {
              color: cornflowerblue;
            }
          }
        }
      }
    }
    .help-footer-right {
      width: calc(100% - 966px);
      text-align: center;
      &::before {
        content: "";
        margin-top: 25px;
        float: left;
        width: 1px;
        height: 120px;
        background-color: rgba(0, 0, 0, 0.3);
      }
      ul {
        li {
          margin-top: 10px;
          &:nth-child(1) {
            margin-top: 25px;
            font-size: 22px;
            color: cornflowerblue;
          }
          &:nth-child(2),
          &:nth-child(4) {
            font-size: 12px;
          }
          &:nth-child(3) {
            a {
              display: inline-block;
              width: 120px;
              height: 30px;
              color: cornflowerblue;
              border: 1px solid cornflowerblue;
              line-height: 32px;
            }
          }
        }
      }
    }
  }
}
</style>